<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.goodsItem {
				display: flex;
				flex-direction: row;
				background-color: antiquewhite;
				padding: 10px;
			}

			.goodsImg {
				width: 20%;
			}

			.single-line-ellipsis {
				width: 60%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<div v-for="(item,i) of goodsLis" :key="i" class="goodsItem">
				<img :src="item.img" class="goodsImg" />
				<div>
					<div class="single-line-ellipsis">编号：{{item.id}} </div>
					<div class="single-line-ellipsis">品名：{{item.name}} </div>
					<div class="single-line-ellipsis">规格：{{item.spec}}</div>
					<div class="single-line-ellipsis">单价：¥{{item.price.toFixed(2)}}</div>
					<div class="single-line-ellipsis">数量：{{item.count}}</div>
				</div>
			</div>
			<script>
				Vue.createApp({
					data() {
						return {
							goodsLis: [{
									id: 401,
									name: "Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)",
									spec: "轻薄笔记本规格 401越毛江当管长便造完步按九下整可采则路内于克习却里想复党道统",
									price: 6988.00,
									count: 2968,
									img: "http://zjffxxmt.oss-cn-hangzhou.aliyuncs.com/upload/goods/57b12a31N8f4f75a3.jpg"
								},
								{
									id: 402,
									name: "Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/256GB SSD闪存 MMGG2CH/A)",
									spec: "轻薄笔记本规格 402年越反根其他矿消路样温织属民了老清状到强确公信相",

									price: 8268.00,

									count: 1922,

									img: "http://zjffxxmt.oss-cn-hangzhou.aliyuncs.com/upload/goods/57ad359dNd4a6f130.jpg"

								},

								{

									id: 403,

									name: "Apple MacBook Air 13.3英寸笔记本电脑 银色(Core i7 处理器/8GB内存/128GB SSD闪存 Z0TA0002L)",

									spec: "轻薄笔记本规格 403什界做便西太派温需间共才更想多义比转自据总消元候示把处层",

									price: 7488.00,

									count: 733,

									img: "http://zjffxxmt.oss-cn-hangzhou.aliyuncs.com/upload/goods/57ad8846N64ac3c79.jpg"

								},

								{

									id: 404,

									name: "Apple MacBook Air 13.3英寸笔记本电脑 银色(Core i7 处理器/8GB内存/256GB SSD闪存 Z0TA0002L)",

									spec: "轻薄笔记本规格 404团示你命办与实权办保几三百土么火术以龙指志原流写第事小去",

									price: 7888.00,

									count: 105,

									img: "http://zjffxxmt.oss-cn-hangzhou.aliyuncs.com/upload/goods/57b12a31N8f4f75a3.jpg"

								},

								{

									id: 409,

									name: "联想(ThinkPad)轻薄系列E480c(20H3A00GCD)14英寸笔记本(i3-6006U 4G 500G 2G独显 Win10)黑色",

									spec: "轻薄笔记本规格 409亲空意且山决身状该油土两以当间性治率广亲约全好极",

									price: 3499.00,

									count: 1461,

									img: "http://zjffxxmt.oss-cn-hangzhou.aliyuncs.com/upload/goods/57b12a31N8f4f75a3.jpg"

								},

								{

									id: 411,

									name: "联想(ThinkPad)轻薄系列E480c(20H3A002CD)14英寸笔记本(i5-6200U 4G 256G SSD 2G独显 Win10)黑色",

									spec: "轻薄笔记本规格 411积包建地转问研况角元报工世交部当色起又起然质不布九",

									price: 5399.00,

									count: 913,

									img: "http://zjffxxmt.oss-cn-hangzhou.aliyuncs.com/upload/goods/57b12a31N8f4f75a3.jpg"

								},

								{

									id: 413,

									name: "华硕(ASUS)13.3英寸RX310UQ金属超极本 学生 商务手提轻薄便携超薄笔记本电脑 玫瑰金 13.3英寸I3-7100U/4G/128G固态",

									spec: "轻薄笔记本规格 413情五今值太称声里很被较九到别维际无儿信构引按机它西名十该",

									price: 4299.00,

									count: 1197,

									img: "http://zjffxxmt.oss-cn-hangzhou.aliyuncs.com/upload/goods/57b12a31N8f4f75a3.jpg"

								},

								{

									id: 414,

									name: "华硕(ASUS)13.3英寸RX310UQ金属超极本 学生 商务手提轻薄便携超薄笔记本电脑 玫瑰金 13.3英寸I5/4G/128G固态",

									spec: "轻薄笔记本规格 414切大不感圆和又类米保易军明干于这例由持但利白加基器细边",

									price: 4999.00,

									count: 137,

									img: "http://zjffxxmt.oss-cn-hangzhou.aliyuncs.com/upload/goods/57b12a31N8f4f75a3.jpg"

								},

								{

									id: 416,

									name: "华硕(ASUS)13.3英寸RX310UQ金属超极本 学生 商务手提轻薄便携超薄笔记本电脑 玫瑰金 13.3英寸I5/8G/256G/2G独显",

									spec: "轻薄笔记本规格 416或门作离对确增至林得级科铁我车第按压领大应下小标向市",

									price: 5699.00,

									count: 981,

									img: "http://zjffxxmt.oss-cn-hangzhou.aliyuncs.com/upload/goods/57b12a31N8f4f75a3.jpg"

								},

								{

									id: 417,

									name: "联想(Lenovo)小新700电竞版 15.6英寸游戏笔记本电脑(i5-6300HQ 8G 500G+128G SSD GTX950M 4G IPS)黑",

									spec: "轻薄笔记本规格 417解此进向规何基认先华去称我委并声育龙十说计着",

									price: 5199.00,

									count: 192,

									img: "http://zjffxxmt.oss-cn-hangzhou.aliyuncs.com/upload/goods/57e52e06N116974f7.jpg"

								},

								{

									id: 420,

									name: "戴尔DELL灵越燃7000 R1725G 14.0英寸轻薄窄边框笔记本电脑(i7-7500U 8G 128GSSD+1T 940MX 2G独显 FHD)金",

									spec: "轻薄笔记本规格 420动与变力据话低究酸可育义住调干车需收约干图定等验知步",

									price: 6599.00,

									count: 1930,

									img: "http://zjffxxmt.oss-cn-hangzhou.aliyuncs.com/upload/goods/58985861N615a3581.jpg"

								},

								{

									id: 421,

									name: "戴尔DELL灵越燃7000 R1525P 14.0英寸轻薄窄边框笔记本电脑(i5-7200U 4G 128GSSD+500G 2G独显 FHD)元気粉",

									spec: "轻薄笔记本规格 421布世外派速需色次列要酸少电门事的无点公只维青连八",

									price: 5299.00,

									count: 987,

									img: "http://zjffxxmt.oss-cn-hangzhou.aliyuncs.com/upload/goods/58985867Nf8909d49.jpg"

								}

							]
						}
					},
					methods: {
						//方法，所以用法同方法的用法——必须加()
					},
				}).mount("#app");

				//测试: 在F12->console->vm.cart[1].count++
			</script>
	</body>

</html>